萝三画室

交易平台项目总结

发表于

2018.04.16 - 2018.04.28 我被assgin到某车厂的汽车零配件线上交易平台。我加入到时候项目已接近尾声，即将准备上线，然而客户此时有新feature需要做，因此派我过来临时支援两周做这些feature。这是我在骚窝的第三个项目，也是为我带来了又一次不同的体验和挑战。

作为一个即将封包上线的项目，代码的框架，风格以及约定都已经是既定了的，我只需要理解并follow就好，这是容易的。但是不容易的是，这个项目有3种用户，分web和mobile两端，算起来总共有5种产品。由于引入了submodule，因此总共需要维护7个代码库。并且我之前从未写过React Native，也是略感不安。所以我的任务是，1个人，在2周之内，同时改造web和mobile2端，涉及7个代码库，最终完善5种产品。其实需求是比较简单的，但是需求最终会体现在每个产品中，所以就需要我快速理解context和所有代码库，找到合适的位置和方式写入新feature。

我做了什么：

  1. 6张业务卡。
    新feature总共拆除5张业务卡，是后来发现对需求理解的有偏差，因此多加了一张卡改正。第一张花费的时间比较久，因为第一张卡就需要改动所有代码库，并且需要搭建新feature对应的代码级架子，以及在第一次完成后由于API改造导致架子结构的又一次大改动，最后这张卡比预计多用了一倍的时间。第一张卡关掉之后就恢复正常节奏了，甚至之后的每张卡都是提前蛮多完成。所以搭好架子是一件多么有价值的事情呀
  2. 1张bug卡
    由于最终新feature的进度快过预期，所以我又接了一些其他的卡。这个bug卡蛮简单，只是禁止app横屏。但是对于一个从来没用过RN的人来说，并没有经验直接解决，是花了小半天时间研究找到了最简方案。通过Google以及其他同事，我知道了有个专门的RN库来配置横屏。但是我并不想为了这个小问题又引入一个库，我觉得应该可以找到原生的办法来解决这个问题，于是就去Google如何在rn里设置禁止横屏。很快我就找到了android的原生办法，就是在android的AndroidManifest.xml中加入一条配置就好。然而ios的就始终没有找到方法。这时我也依然觉得ios也应该可以类似的思路实现，于是我就尝试去找iOS 的“AndroidManifest.xml”。后来找到了Info.plist，发现有一段xml写着UISupportedInterfaceOrientations，里面包含了支持三种orientation的array。我把其中两个允许向右转和向左转的去掉只保留Portrait，it works！所以最后给android加1句配置，给iOS删2句配置就做完了这张卡。相比于通过第三方库去做这件事情，显然这样改原生配置性价比更高。
  3. 1张enhance卡

这张卡要做的事情是把单重排序变成先分组，再排序。考虑到消除副作用，维持函数输入输出的结构不变以及代码的可读性，我决定用lodash的groupBy和map以及数组和对象的解构完成分组和排序。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
sortByKey = (list, key) => {
	//通过list对象的isSatisfiedEnquiry字段（bool）分组返回一个新对象，然后解构出totalSatisfiedEnquiry，partSatisfiedEnquiry两个对象(组)
  const { true: totalSatisfiedEnquiry, false: partSatisfiedEnquiry } = groupBy(list, 'isSatisfiedEnquiry')
  //在每个组内排序，返回一个新的数组，并解构出组内排好序的两个新对象(组)totalSatisfiedOrderEnquiry，partSatisfiedOrderEnquiry
  const [totalSatisfiedOrderEnquiry, partSatisfiedOrderEnquiry] =
    map({ totalSatisfiedEnquiry, partSatisfiedEnquiry }, group => {
    	//原排序逻辑
      if (key === 'quotationTime') {
        return sortBy(group, (item) => -get(item, key))
      } else if (key === 'totalPriceWithTax') {
        return sortBy(group, (item) => get(item, ['priceSummary', key]))
      }
      return sortBy(group, (item) => get(item, key))
    })
  //将两个组拍平并返回新数组
  return [...totalSatisfiedOrderEnquiry, ...partSatisfiedOrderEnquiry]
}

因为这个函数里会生成并使用许多新变量，因此要十分注意每个表达式的副作用。这里就可以明显感受到lodash的好处。如果不用lodash，我们就可能会加上许多值的判断。

收获：

  1. RN初使用
  2. 快速加入以成型项目的经验
  3. git submodule
  4. immutable

不足：

  1. 理解代码的速度
  2. 解决bug的思路
  3. 时间紧时，有些着急，乱了节奏
  4. 性能方面没有研究

虽然只有短短两周的时间，但是还是有很多体验和收获。前期架子很重要，后面我的卡做的快也是由于之前的同事们写的蛮好，我可以很容易的扩展和重用。同事们十分nice，帮助我很多。希望以后也多遇到些不同的挑战～